// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
let image = $('#image')
console.log(image)
// - 设置配置项
let option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
}
// - 调用cropper方法，创建剪裁区
image.cropper(option)

$('button:contains("上传")').on('click', function () {
    $('#file').trigger('click')
})

$('#file').on('change', function () {
    if (this.files.length > 0) {
        let objFile = this.files[0]
        console.log(objFile)
        let url = URL.createObjectURL(objFile)
        console.log(url)
        image.cropper('replace',url)
    }
  
})
$('button:contains("确定")').on('click', function () {
    let canvas = cimageropper('getCroppedCanvas', { width: 30, height: 30 })
    // console.log(canvas)
    let url = canvas.toDataURL('image/jpeg', 0.4)
    // console.log(url)
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: url },
        success: function (res) {
            if (res.status === 0) {
              layer.msg(res.message);
              // 更新index.html的头像
              window.parent.getUserInfo();
            }
        }
    })

})